<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>A uuCanvas.Layer.dots() example</title>

    <script type="text/xaml" id="xaml"><?xml version="1.0"?>
      <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<script type="text/javascript" src="../uupaa-excanvas.js"></script>

    <script>
    function boot() {
      var palette1 = { 1: "#FF3900",   // red  // { r: 255, g: 57, b: 0, a: 1 }
                       2: "#AD7B00",   // koge // { r: 173, g: 123, b: 0, a: 1 }
                       3: "#FFA542" }; // skin // { r: 255, g: 165, b: 66, a: 1 }
      var palette2 = { 1: "whitesmoke",
                       2: "#438845",
                       3: "#FFA542" };
      var layer1 = new uuCanvas.Layer(document.getElementById("layerspace1"), 200, 200);
      var layer2 = new uuCanvas.Layer(document.getElementById("layerspace2"), 200, 200);
      layer1.addCanvas("a").show();
      layer2.addVMLCanvas("a").show();
      uuCanvas.ready(function() {
        draw(layer1, palette1);
        draw(layer2, palette2);
      });
    }
    function draw(layer, palette) {
              // 0123456789012345
      var dot =
                "      1111      "+
                "     11111111   "+
                "    2223323     "+
                "   2323332333   "+
                "   23223332333  "+
                "   2233332222   "+
                "     3333333    "+
                "  22221122      "+
                "332222111222333 "+
                "333 11131112233 "+
                "33  1111111  2  "+
                "   11111111122  "+
                "  211111111122  "+
                " 22111   11122  "+
                "222             "+
                " 222            "+
                "     11111      "+
                "    111111111   "+
                "    2223323     "+
                "   2323332333   "+
                "   23223332333  "+
                "   2233332222   "+
                "     3333333    "+
                "    221222      "+
                "   2221221222   "+
                "  222211112222  "+
                "  332131131233  "+
                "  331111111133  "+
                "    111  111    "+
                "   222    222   "+
                "  2222    2222  "+
              "                "+
              "      11111     "+
              "    1111113     "+
              "   11111133     "+
              "   11111111111  "+
              "   222332333    "+
              "  233233223333  "+
              "  2332333333333 "+
              "  2332233333333 "+
              " 2233223222222  "+
              " 2223333322222  "+
              "   2233333333   "+
              "   13333332     "+
              "   212222212    "+
              "  22122222122   "+
              " 2221222221222  "+
              " 2221222221222  "+
              "222112222211222 "+
              "2221111111112222"+
              "2221131113112222"+
              "3333111111113333"+
              "3333111111113333"+
              " 33311111111333 "+
              " 33111111111133 "+
              "  111111111111  "+
              " 111111  111111 "+
              " 11111    11111 "+
              " 11111    11111 "+
              "  2222    2222  "+
              "  2222    2222  "+
              "222222    222222"+
              "222222    222222"+
              "";
      layer.scale(5, 5).
            dots(0, 5, 16, 32, palette, dot.split("")).
            dots(16, 5, 16, 32, palette, dot.split(""), 16 * 32);
    }
    </script>
    <style type="text/css">
      body { margin: 20px; font-family: arial,verdana,helvetica; background: #ccc;}
      h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }
      canvas { border: 2px solid #000; float: left; margin-right: 20px; margin-bottom: 20px; }
      pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
    </style>
  </head>
  <body onload="boot();">
    <h1>A canvas <code>uuCanvas.Layer.dots()</code> example</h1>
    <div>
      <div id="layerspace1"></div>
      <div id="layerspace2"></div>
      <pre>
      &lt;div id="layerspace1"&gt;&lt;/div&gt;
      &lt;div id="layerspace2"&gt;&lt;/div&gt;

    function boot() {
      var palette1 = { 1: "#FF3900",   // red  // { r: 255, g: 57, b: 0, a: 1 }
                       2: "#AD7B00",   // koge // { r: 173, g: 123, b: 0, a: 1 }
                       3: "#FFA542" }; // skin // { r: 255, g: 165, b: 66, a: 1 }
      var palette2 = { 1: "whitesmoke",
                       2: "#438845",
                       3: "#FFA542" };
      var layer1 = new uuCanvas.Layer(document.getElementById("layerspace1"), 200, 200);
      var layer2 = new uuCanvas.Layer(document.getElementById("layerspace2"), 200, 200);
      layer1.addCanvas("a").show();
      layer2.addVMLCanvas("a").show();
      uuCanvas.ready(function() {
        draw(layer1, palette1);
        draw(layer2, palette2);
      });
    }
    function draw(layer, palette) {
              // 0123456789012345
      var dot =
                "      1111      "+
                "     11111111   "+
                "    2223323     "+
                "   2323332333   "+
                "   23223332333  "+
                "   2233332222   "+
                "     3333333    "+
                "  22221122      "+
                "332222111222333 "+
                "333 11131112233 "+
                "33  1111111  2  "+
                "   11111111122  "+
                "  211111111122  "+
                " 22111   11122  "+
                "222             "+
                " 222            "+
                "     11111      "+
                "    111111111   "+
                "    2223323     "+
                "   2323332333   "+
                "   23223332333  "+
                "   2233332222   "+
                "     3333333    "+
                "    221222      "+
                "   2221221222   "+
                "  222211112222  "+
                "  332131131233  "+
                "  331111111133  "+
                "    111  111    "+
                "   222    222   "+
                "  2222    2222  "+
              "                "+
              "      11111     "+
              "    1111113     "+
              "   11111133     "+
              "   11111111111  "+
              "   222332333    "+
              "  233233223333  "+
              "  2332333333333 "+
              "  2332233333333 "+
              " 2233223222222  "+
              " 2223333322222  "+
              "   2233333333   "+
              "   13333332     "+
              "   212222212    "+
              "  22122222122   "+
              " 2221222221222  "+
              " 2221222221222  "+
              "222112222211222 "+
              "2221111111112222"+
              "2221131113112222"+
              "3333111111113333"+
              "3333111111113333"+
              " 33311111111333 "+
              " 33111111111133 "+
              "  111111111111  "+
              " 111111  111111 "+
              " 11111    11111 "+
              " 11111    11111 "+
              "  2222    2222  "+
              "  2222    2222  "+
              "222222    222222"+
              "222222    222222"+
              "";
      layer.scale(5, 5).
            dots(0, 5, 16, 32, palette, dot.split("")).
            dots(16, 5, 16, 32, palette, dot.split(""), 16 * 32);
    }
      </pre>
    </div>
  </body>
</html>
